<script setup>
import { ref } from 'vue'
const data = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c95135c31082640c8f42f9a61966b635.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/086a234cdcc9234c236b1b744ab2df68.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202403131610_4c436d462d84b5109080ccf6b632844c.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/21429638bdd453e8c1cb5c357ff4835b.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
const List = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9cd8a5a447b4f84faeb3791811a179f9.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/db032eeb9e8efe9551161ee18bf70d3f.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212131701_80db3da0f97aeb6b724039a4c5a24dd7.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/608a47f5d655fc1372de67ee2f7b1c43.jpg?thumb=1&w=100&h=100&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
const OneData = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202304180958_20a47c43888b873b18af2b89216e9c9d.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  }
])
const TowData = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1664285178.54196051.jpg?thumb=1&w=200&h=200',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1656418637.39296454.jpg?thumb=1&w=200&h=200',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1653472239.43129036.jpg?thumb=1&w=200&h=200',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202310081508_18b8d7deaaca3515a957de09c1e18703.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
const TowDatas = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1605536123.55818348.jpg?thumb=1&w=200&h=200',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a7263d580ca820db7e8de56a42641ca.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202309261016_5420d0a9f0e651054aef1352b4b3b10a.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202309261016_5420d0a9f0e651054aef1352b4b3b10a.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
const serrData = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c95135c31082640c8f42f9a61966b635.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/086a234cdcc9234c236b1b744ab2df68.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202403131610_4c436d462d84b5109080ccf6b632844c.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/21429638bdd453e8c1cb5c357ff4835b.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
const serrDatas = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9cd8a5a447b4f84faeb3791811a179f9.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/db032eeb9e8efe9551161ee18bf70d3f.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212131701_80db3da0f97aeb6b724039a4c5a24dd7.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/608a47f5d655fc1372de67ee2f7b1c43.jpg?thumb=1&w=100&h=100&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
const addTv = () => {
  data.value = OneData.value
  List.value = ''
}
const addKt = () => {
  data.value = TowData.value
  List.value = TowDatas.value
}
const addHot = () => {
  data.value = serrData.value
  List.value = serrDatas.value
}
</script>
<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-header>
          <h1>家电</h1>
          <h1 style="text-align: center" class="more">
            <span class="One" @click="addHot">热门&nbsp;&nbsp;&nbsp;</span>
            <span class="Two" @click="addTv">电视音箱&nbsp;&nbsp;&nbsp;</span>
            <span class="seer" @click="addKt">空调</span>
          </h1>
        </el-header>
        <el-container>
          <el-aside class="leftimg" width="234px">
            <img
              src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/71a8e491a39b9c246246140fe68d256b.jpg?thumb=1&w=234&h=300&f=webp&q=90"
            />
          </el-aside>
          <el-main>
            <div class="container">
              <div
                class="item"
                v-for="item in data"
                :key="item.id"
                style="width: 234px"
              >
                <img :src="item.src" class="image" style="width: 250px" />
                <div class="text">
                  <p class="one">{{ item.oname }}</p>
                  <p class="tow">{{ item.tname }}</p>
                  <p class="seer">
                    {{ item.sname }}&nbsp;
                    <del style="color: #b0b0b0">{{ item.delname }}</del>
                  </p>
                </div>
              </div>
            </div>
          </el-main>
        </el-container>
      </el-container>
      <el-container>
        <el-header> </el-header>
        <el-container>
          <el-aside class="leftimg" width="234px">
            <img
              src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/65e186001431a799d30fa84359f4b84e.jpg?thumb=1&w=234&h=300&f=webp&q=90"
            />
          </el-aside>
          <el-main>
            <div class="container">
              <div
                class="item"
                v-for="item in List"
                :key="item.id"
                style="width: 234px"
              >
                <img :src="item.src" class="image" style="width: 250px" />
                <div class="text">
                  <p class="one">{{ item.oname }}</p>
                  <p class="tow">{{ item.tname }}</p>
                  <p class="seer">
                    {{ item.sname }}&nbsp;
                    <del style="color: #b0b0b0">{{ item.delname }}</del>
                  </p>
                </div>
              </div>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<style scoped lang="scss">
.common-layout {
  overflow: hidden;
  width: 1500px;
  height: 750px;
  margin: 1px auto;
  .leftimg {
    transition: all 0.5s;
    img {
      width: 243px;
      height: 300px;
    }
    &:hover {
      cursor: pointer;
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    }
  }
  .el-header {
    display: flex;
    justify-content: space-between;
    .more {
      display: flex;
      align-items: center;
      .One {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
      .Two {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
      .seer {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
    }
  }
  .el-main {
    padding: 0;
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item {
        text-align: center;
        flex-basis: 25%;
        transition: all 0.5s;
        &:hover {
          cursor: pointer;
          transform: translate3d(0, -3px, 0);
          box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
        }
        .text {
          .one {
            font-size: 12px;
          }
          .tow {
            color: #b0b0b0;
          }
          .seer {
            color: #e26237;
          }
        }
      }
    }
  }
}
.common {
  overflow: hidden;
  width: 1500px;
  height: 100%;
  margin: 100px auto;
  .leftimg {
    transition: all 0.5s;
    img {
      width: 243px;
      height: 300px;
    }
    &:hover {
      cursor: pointer;
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    }
  }
  .el-header {
    display: flex;
    justify-content: space-between;
    .more {
      display: flex;
      align-items: center;
      .One {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
      .Two {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
      .seer {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
    }
  }
  .el-main {
    padding: 0;
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item {
        text-align: center;
        flex-basis: 25%;
        transition: all 0.5s;
        &:hover {
          cursor: pointer;
          transform: translate3d(0, -3px, 0);
          box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
        }
        .text {
          .one {
            font-size: 12px;
          }
          .tow {
            color: #b0b0b0;
          }
          .seer {
            color: #e26237;
          }
        }
      }
    }
  }
}
</style>
